<template>
  <div class="boxs">
      
      <div class="main">
        <div class="left">
                    <div style="margin-bottom:10px">
              <el-alert v-if="node.cbSecurityScore>=60"
              title="该帖子安全指数100%,可以放心阅读,请注意评论区以及内容区有没有恶意钓鱼网站链接"
              type="success">
            </el-alert>
           
            <el-alert v-else
              title="该帖子存在外部链接,无法判断链接的可靠性,请谨慎点击离开本站,否则后果自负"
              type="warning">
            </el-alert>
               
        </div>
            <div class="content">
            <p style="text-align:right">
                <img v-if="node.cbSecurityScore>=60" title="该帖子很安全"  src="@/assets/anquan.png" width="20px" height="25px" alt="">
                <img v-else title="该帖子存在外部链接请谨慎点击离开本站"  src="@/assets/noanquan.png" width="20px" height="25px" alt="2">
                <img title="举报"  src="@/assets/jubao.png" width="25px" height="25px" style="margin-left:10px" alt="">

            </p>
            <h1>{{node.cbName}}</h1>
            <h2>{{node.cbMess}}</h2>
            <h3>时间：{{node.cbDate}}  <span style="margin-left:10px">浏览：{{node.cbLook}}</span><span style="margin-left:10px">评论：10</span></h3>
            <div class="context" v-html="node.cbContext" id="cont">
                
             </div>
        </div>
            <div class="comment">
                <p>评论区：</p>
                 
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
     <userCord userId="item.userId" userHeader="https://www.kuangstudy.com/assert/images/avatar/14.jpg" userMess="人生之路岂容如此" userName="北辞"></userCord>
    
            </div>
            
        </div>

        <div class="right">
            <userCord :userId="node.cbUserId" :userHeader="node.userHeader" :userMess="node.userMess" :userName="node.userName"></userCord>
            <ul class="meui">
                <li>前言</li>
                <li>开始学习</li>
                <li>springboot</li>
                <li>springboot集成</li>
                <li>springboot集成</li>
                <li>springboot集成</li>
                <li>springboot集成</li>
                <li>springboot集成</li>
            </ul>
        </div>
      </div>
  </div>
</template>

<script>
import userCord from "@/components/userCord/usercord.vue"
export default {
    props:["id"],
    components:{userCord},
    data(){
        return{
            node:null
        }
    },
    methods:{
            // 解析H标签
            analyze(){
                console.log(this.node.cbContext)
                
                setTimeout(()=>{var a =document.getElementById("cont").children.h2;
                  console.log(a)},1000)
              
            }
    },  
    created(){
        this.$http.get("/cbnode/detail/"+this.id).then(va=>{
            if(va.data.code==404){
                this.$alert("该文章已消失到外太空！")
            }
            if(va.data.code==200){
                this.node=va.data.data
                this.analyze()
            }
        })
    }
}
</script>

<style scoped lang="less">

    .boxs{
        width: 100%;
    }
    .main{
         width: 70%;
        height: 0px auto;
        margin: 0px auto;
        display: flex;
        justify-content: space-around;
        .left{
            margin-top: 30px;
            // margin-top: 10px;
            width: 80%;
            height: auto;
            background: #fff;
            .comment{
                width: 100%;
                height: auto;
                background: #fff;
                margin-top: 10px;
                box-shadow:  0 0 12px rgba(0,0,0,0.1);
                padding: 30px;
            }
            .content{
                width: 100%;
                height: auto;
                box-shadow:  0 0 12px rgba(0,0,0,0.1);;
                padding: 30px;
            
                h1{
                    color:#34495e;font-size:28px;
                }
                h2{
                    font-size: 15px;
                    margin-top: 10px;
                    margin-left: 10px;
                    color: #999999 !important;
                    font-weight: normal;
                }
                h3{
                    font-size: 13px;
                    margin-top: 10px;
                    margin-left: 10px;
                    color: #999999 !important;
                    font-weight: normal;
                }
            }

      
        }
        
        .right{
            margin-top: 30px;
            width: 20%;
            height: 300px;
            background: #fff;
            margin-left: 10px;
              box-shadow:  0 0 12px rgba(0,0,0,0.1);;
        }
    }
    @keyframes left{
        100%{transform: translateY(-10px);}
    }
    .meui{
        width: 100%;
        height: auto;
        padding: 10px;
        list-style: none;
        li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }
    }
    .meui li:hover{
        animation: left 1s forwards;
        box-shadow:  0 0 12px rgba(0,0,0,0.1);;
    }
    .context{
        width: 100%;
        height: auto;
        margin-top: 20px;
            img{
                    display: block;
                    margin:20px auto;
                     box-shadow:  0 0 12px rgba(0,0,0,0.1);;
                }
        p{
            line-height: 30px;
        }
    }
   
     @media  screen and (max-width: 1300px) {
         .main{
             width: 100% !important;
             display: block !important;
             .left{
                 width: 100% !important;
             }
             .right{
                 width: 100% !important;
             }
         }
     }
</style>